<template>
<div>
  <main>
  <form action="">
    <input type="text" placeholder="请输入手机号码" class="tel" v-model="yzm.user_phone">
    <input type="text" placeholder="请设置密码" class="pass" v-model="yzm.password">
    <input type="text" placeholder="请输入验证码" class="yzm">
    <span @click="getYzm">获取验证码</span>
    <br>
    <input type="submit" value="登录" class="sub" @click="goToLogin">
  </form>
  </main>
</div>
  
</template>

<script>
import { ref,reactive } from "vue";
import {getCodeApi} from "../../utils/api.js";
import { useRouter } from "vue-router";
export default {
 setup(){
   const yzm=reactive({
     user_phone:'',
     password:'',
   })
   const getYzm=()=>{
     console.log(yzm.user_phone,yzm.password);
     if(yzm.user_phone&&yzm.password){ getCodeApi(yzm);}
     console.log(getCodeApi(yzm));
   }
   const router=useRouter();
   const goToLogin=()=>{
     if(getCodeApi(yzm)){
       router.push("/login");
     }
   }
   return { yzm,getYzm }
 },
};
</script>
<style lang="scss" scoped>
main{
  padding:20px;
  background: #fff;
  height:50%;
  width:90%;
  border-radius:10px;
  margin:100px auto 0;
  position:relative;
  input{
    outline:none;
    border:0;
    width:100%;
    height:50px;
    border-bottom:solid #ccc 1px;
    font-size:16px;
    text-indent:30px;
  }
  .tel{
      background: url("../../assets/img/手机@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  .pass{
      background: url("../../assets/img/验证码@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  .yzm{
      background: url("../../assets/img/验证码@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  span{
    display:inline-block;
    font-size:16px;
    line-height:36px;
    text-align: center;
    position:absolute;
    top:127px;
    right:30px;
    height:36px;
    width:100px;
    border-radius:18px;
    background:rgb(28, 187, 174);
    outline:none;
    border:0;
    color:#fff;
  }
  .sub{
    border-radius:25px;
    background:rgb(28, 187, 174);
    margin-top:20px;
    color:#fff;
    font-size:20px;
    text-indent:0;
  }
}

</style>
